{% extends "single_demo.html" %}

{% block demo-header %}tv.ui.Link{% endblock %}

{% block demo-content %}
<style type="text/css">
.tv-link {
  color: #add8e6;
  cursor: pointer;
}

.tv-link:hover,
.tv-link.tv-component-focused {
  text-decoration: underline;
  text-shadow: 0 0 4px white;
}
</style>

<p>Browser link (<code>&lt;a&gt;</code> element) has serveral downsides:
<ul>
  <li>when it's focused by browser, layout can be damaged by page scrolling to the link,</li>
  <li>browser displays link destination on the bottom of the screen which
      distracts user,</li>
  <li>browsers by default renders its outline which might not match the UI of app.</li>
</ul>
</p>
<p>CSS class used for decoration: <code>tv-link</code></p>
<p>HTML structure:
<pre>
  &lt;div class="tv-link" href="http://link to external site"&gt;Link content&lt;/div&gt;
</pre>
</p>

<p>Click or press space or enter to go to url.</p>
<div class="tv-link" href="http://google.com/tv">
  Google TV features (goes to http://google.com/tv)
</div>

{% endblock %}